import React, { Component } from 'react';
import { NavBar, Icon, Carousel, Toast } from 'antd-mobile';
import Style from './GoodDetail.module.scss';
import axios from '../../utils/fecth';
import {connect} from 'react-redux'
class GoodDetail extends Component {
    state = {
        data: '',
        GoodDetailInfo: [],
        showSwiper: false,
        showCollect: false,

    }
    componentDidMount() {
        console.log(this.props)
        let good_id = this.props.match.params.good_id
        axios.get('/goods/detail', {
            params: {
                goods_id: good_id,
            }
        }).then(res => {
            console.log(res);
            this.setState({
                GoodDetailInfo: res,
                showSwiper: true,

            })
        })


        let shuju = JSON.parse(localStorage.getItem("collections") || "[]")
        console.log(1321213)
        console.log(good_id)
        let index = shuju.findIndex(v => {

            if (v.goods_id == good_id)
                return true
        })
        if (index != -1) {
            this.setState({
                showCollect: true,
            })
        }
    }
    // 收藏
    handerChangeClick = () => {
        console.log(21231)

        let shuju = JSON.parse(localStorage.getItem("collections") || "[]")
        let index = shuju.findIndex(v => {
            if (v.goods_id === this.state.GoodDetailInfo.goods_id)
                return true
        })
        if (index != -1) {
            shuju.splice(index, 1)
            this.setState({
                showCollect: false
            })
        } else {
            shuju.push(this.state.GoodDetailInfo)
            this.setState({
                showCollect: true
            })
        }
        localStorage.setItem("collections", JSON.stringify(shuju))


        // eslint-disable-next-line eqeqeq
        // if (good != -1)
        //     localStorage.setItem("goods_id", shuju.splice(good, 1))
        // else
        //     localStorage.setItem("goods_id", shuju.push(goods_id))
    }
    // handleCollect = (params) => {
    //     // collections 代表的是收藏的数据 数组

    //     let collections_str = localStorage.getItem("collections");
    //     let collections = JSON.parse(collections_str||"[]");
    //     // 对收藏进行循环遍历
    //     // 判断是否在收藏中
    //     console.log(this.state.GoodDetailInfo)
    //     let index = collections.findIndex(v=>{
    //         if(v.goods_id === this.state.GoodDetailInfo.goods_id){
    //             return true;
    //         }
    //     })
    //     if(index!=-1){
    //         // 代表之前收藏过
    //         collections.splice(index,1);
    //         Toast.info("取消收藏成功",1);
    //         this.setState({
    //           showCollect:false
    //         })
    //     }else{
    //         Toast.info("收藏成功！",1);
    //         collections.push(this.state.GoodDetailInfo);
    //         this.setState({
    //           showCollect:true
    //         })
    //     }
    //     localStorage.setItem("collections",JSON.stringify(collections));

    // }
    // 跳转至购物车页面跳转
    jumpToCart = () => {
        this.props.history.push("/cart")
    }
    //添加至购物车
    addToCart = () => {
        let { goods_id } = this.state.GoodDetailInfo;
        let shopping = JSON.parse(localStorage.getItem("cart") || "[]")
        let index = shopping.findIndex(v => {
            if (v.goods_id == goods_id)
                return true
        })
        let data = this.state.GoodDetailInfo
        console.log(data);
        if (index == -1) {
            
            data.num = 1
            data.checked = true

            shopping.push(
                data
            )
        } else 
        // eslint-disable-next-line no-undef
        shopping[index].num++
        
        let shoppingS = JSON.stringify(shopping)
        localStorage.setItem("cart",shoppingS)


    }
//支付页面
payCart=()=>{
    this.props.history.push("/pay")
}
    render() {
        let { GoodDetailInfo } = this.state;
        let pics = GoodDetailInfo.pics;

        return (
            <div className={Style.ygGoodDetail}>
                {/* 标题 */}
                <NavBar
                    className={Style.ygGoodDetailNav}
                    mode="light"
                    icon={<Icon type="left" />}
                    onLeftClick={() => window.history.go(-1)}
                >
                    <div className={Style.ygGoodDetailTitle}>商品详情</div>
                </NavBar>
                {/* 轮播图 */}
                <div className={Style.ygGoodDetailSwiper}>
                    {this.state.showSwiper && <Carousel
                        infinite autoplay={true}

                    >
                        {pics && pics.map(val => (
                            <div
                                className={Style.ygGoodDetailSwiperBox}
                                key={val.goods_id}
                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                            >
                                <img

                                    src={val.pics_mid}
                                    alt=""

                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </div>
                        ))}
                    </Carousel>}
                    {/* 价格 */}
                    <div className={Style.ygGoodDetailSwiperPice}>
                        <span>$2699</span>
                        <div className={Style.ygGoodDetailSwiperPiceIcon}>

                            <i className="iconfont icon-fenxiang_2 ii"></i>
                            <div className={this.state.showCollect ? Style.active : ""}><i className="iconfont icon-shoucang" onClick={this.handerChangeClick} ></i></div>
                        </div>
                    </div>

                    {/* 图文详情图 */}
                    <div className={Style.ygGoodDetailTitle}>
                        {GoodDetailInfo.goods_name}
                    </div>
                    <div className={Style.ygGoodDetailHeaderTitle}>图文详情</div>
                    <div className={Style.ygGoodDetailPhoto} dangerouslySetInnerHTML={{ __html: GoodDetailInfo.goods_introduce }}>

                    </div>
                </div>
                {/* 底部 */}
                <div className={Style.ygGoodDetailBottom}>
                    <div className={Style.ygGoodDetailBOttomCustomer}>
                        <i className="iconfont icon-tubiao_lianxikefu"></i>
                        <div className={Style.ygGoodDetailBottomTitle}>联系客服</div>
                    </div>
                    <div className={Style.ygGoodDetailBottomCustomer} onClick={this.jumpToCart}>
                        <i className="iconfont icon-gouwuche"></i>
                        <div className={Style.ygGoodDetailBottomTitle} >购物车</div>
                    </div>
                    <div className={Style.ygGoodDetailBottomShop} onClick={this.addToCart}>
                        加入购物车
                    </div>
                    <div className={Style.ygGoodDetailBottomBuy} onClick={this.payCart}>
                        立即购买
                    </div>

                </div>
            </div>
        );
    }
}



const mapState = (state) => {
    return {
      cartData: state.cartReducer.cartData,
    };
  };
//   const mapDispatch = (dispatch) => {
//     //
//     return {
//         type:'',
//         value:{

//         },
//     };
//   };
export default connect(mapState,null)(GoodDetail);
